<template>
  <div class="dg-header-cell-wrapper" v-show="show"
       :style="cellWrapperStyle">
    <div class="dg-header-cell" :style="[cellStyle, column.headerStyle]" :class="[cellClass, column.headerClass]">
      <div class="dg-resize-bar-left" @mousedown="handleMouseDown($event, column)"
           v-if="leftResizable"></div>
      <div class="dg-check-all" v-if="hasSelectAll" :class="[verticalAlignClass]">
        <checkbox :value="checkAllState" @input="onCheckAllStateChange"></checkbox>
      </div>
      <div style="position: relative;width: 100%;height: 100%;">
        <div class="dg-header-cell-content" :class="[verticalAlignClass, horizontalAlignClass, sortClass]">
          {{column.title}}
          <span class="caret-wrapper" v-if="column.sortable && !column.subColumns">
            <i class="sort-caret asc" @click="handleSortClick(column, 'asc')"></i>
            <i class="sort-caret desc" @click="handleSortClick(column, 'desc')"></i>
          </span>
        </div>
      </div>
      <div class="dg-resize-bar" @mousedown="handleMouseDown($event, column)"
           v-if="normalResizable"></div>
    </div>
    <data-grid-header-cell v-for="col in column.subColumns"
                           @start-resize="handleMouseDown"
                           @check-all="onCheckAllStateChange"
                           :key="col.field"
                           :column="col"
                           :root-config="rootConfig"
                           :heights="heights"
                           :level="level + 1"></data-grid-header-cell>
  </div>
</template>

<script>
  import _ from 'lodash'
  import Checkbox from '../components/Checkbox.vue'

  export default {
    components: {Checkbox},
    name: 'DataGridHeaderCell',
    props: {
      rootConfig: {
        type: Object,
        default () {
          return {}
        }
      },
      curSorting: {
        type: Object,
        default () {
          return null
        }
      },
      column: {
        type: Object,
        default () {
          return {}
        }
      },
      level: Number,
      heights: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        show: false,
        width: 24,
        left: 0,
        currentDrag: null,
        checkAllState: false,
        sortClass: null,
        setCheckAllState: _.debounce(isAllChecked => {
          this.checkAllState = isAllChecked
        }, 100)
      }
    },
    methods: {
      refreshPosition () {
        this.width = this.column._width
        this.left = this.column._left || 0
        this.show = !this.column.hide
      },
      handleMouseDown ($event, column) {
        let isRightFixed = this.rootColumn.fixed === 'right'
        this.$emit('start-resize', $event, column, isRightFixed)
      },
      onCheckAllStateChange (isAllChecked) {
        this.$emit('check-all', isAllChecked)
      },
      handleSortClick (column, sort) {
        this.$emit('sort-change', column, sort)
      },
      refreshSortClass () {
        this.sortClass = this.curSorting && this.curSorting.column === this.column ? this.curSorting.sort : null
      },
      refreshConfig () {
        this.column._$headerVM = this
        if (this.column.sortable) {
          this.refreshSortClass()
        }
        this.refreshPosition()
      }
    },
    computed: {
      verticalAlignClass () {
        return this.rootConfig.titleVerticalAlign ? 'dg-abs-v-' + this.rootConfig.titleVerticalAlign : null
      },
      horizontalAlignClass () {
        return this.rootConfig.titleHorizontalAlign ? 'dg-text-' + this.rootConfig.titleHorizontalAlign : null
      },
      cellWrapperStyle () {
        return {
          width: `${this.width}px`,
          height: `${this.heights[this.level]}px`,
          bottom: '0',
          left: `${this.left}px`
        }
      },
      cellStyle () {
        return {
          height: `${this.isLeafCell ? this.heights[this.level] : (this.heights[this.level] - this.heights[this.level + 1])}px`,
          'padding-left': `${this.hasSelectAll ? '38px' : null}`
        }
      },
      cellClass () {
        return {
          'dg-header-top-border': !!this.column.borders[0],
          'dg-header-bottom-border': !!this.column.borders[2],
          'dg-header-left-border': !!this.column.borders[3],
          'dg-header-right-border': !!this.column.borders[1]
        }
      },
      isLeafCell () {
        return !this.column.subColumns || this.column.subColumns.length === 0
      },
      hasSelectAll () {
        return this.column.checkbox && this.column.checkAll && this.isLeafCell
      },
      resizable () {
        return this.column.resizable !== false && this.isLeafCell
      },
      rootColumn () {
        let rc = this.column
        while (rc.parent) {
          rc = rc.parent
        }
        return rc
      },
      leftResizable () {
        return this.resizable && this.rootColumn.fixed === 'right'
      },
      normalResizable () {
        return !this.leftResizable && this.resizable
      }
    },
    mounted () {
      this.refreshConfig()
    },
    watch: {
      column () {
        this.refreshConfig()
      },
      curSorting () {
        this.refreshSortClass()
      }
    },
    destroyed () {
      delete this.column._$headerVM
    }
  }
</script>
